<template>
  <MyList :getList="getList" :resetList="resetList">
    <div v-if="list.length">
      <van-card v-for="item in list" :key="item._id" :price="item.price?.toFixed(2)" :desc="item.msg" :title="item.title">
        <template #thumb>
          <img :src="item.imgList[0]?.url" class="img" @click="showImg(item.imgList)">
        </template>
        <template #footer>
          <span style="margin-right: 10px;">库存：{{ item.total }}</span>
          <van-stepper v-model="item.value" min="0" max="10" integer />
          <van-button type="primary" size="small" @click="joinBuyCar(item)"
            :disabled="item.value <= 0 || item.total <= 0">加入购物车</van-button>
          <!-- <van-button type="danger" size="small" :disabled="item.value <= 0" >立即购买</van-button> -->
        </template>
      </van-card>
    </div>
    <van-empty v-else />
  </MyList>
</template>
<script setup>
import { useRouter, useRoute } from 'vue-router';
import { ref, onMounted } from 'vue';
import MyList from "@/components/myList/index.vue"
import { showImagePreview, showSuccessToast, showToast } from 'vant';
import { getGoods, addBuyCar } from "@/api/index"
import { toPage, isWeiXin, reLaunch } from '@/utlis/tools';
import { useStore } from "@/store"
const store = useStore();

const router = useRouter()
const { tag, name } = defineProps(["tag", "name"]);
const list = ref([
  // {
  //   id: 1,
  //   title: "商品标题1",
  //   msg: "商品描述商品描述商品描述商品描述商品描述商品描述",
  //   imgList: ["https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg", 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
  //     'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',],
  //   price: 2,
  //   value: 0,
  // },
  // {
  //   id: 2,
  //   title: "商品标题2",
  //   msg: "商品描述",
  //   imgList: ["https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg", 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
  //     'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',],
  //   price: 2,
  //   value: 0,
  // },
])
const obj = {
  "all": undefined,
  "classify1": 1,
  "classify2": 2,
}
const resetList = () => {
  list.value = []
}
const getList = async (index, search) => {
  const { data, code, paginate } = await getGoods({
    page: index ? index : 1,
    size: 10,
    name: search !== undefined ? search : name,
    type: obj[tag],
    token: 0
  })
  if (code == 200) {
    let arr = []
    data.map(item => {
      if (item.imgList) {
        item.imgList = JSON.parse(item.imgList)
        item.value = 0
        arr.push(item)
      }
    })
    search ? list.value = arr : list.value.push(...arr)
    if (data.length) {
      return {
        // total: paginate?.total,
        total: list.value.length,
        list: list.value
      }
    } else {
      return {
        total: list.value.length,
        list: list.value
      }
    }
  } else {
    return {
      total: list.value.length,
      list: list.value
    }
  }
}
const showImg = (img) => {
  let list = img.map(item => item.url)
  showImagePreview(list);
}
const joinBuyCar = async (item) => {
  let token = window.localStorage.getItem("token");
  if (!token) {
    showToast("请先登录")
    store.tabkey = 3
    sessionStorage.setItem("tabKey", 3)
    router.push("/me?istoken=1");
    return
  }
  await addBuyCar({
    goodsid: item._id,
    title: item.title,
    msg: item.msg,
    imgList: JSON.stringify(item.imgList),
    price: item.price,
    value: item.value,
    total: item.total,
    type: item.type
  })
  showSuccessToast("加入购物车成功")
}
defineExpose({
  getList
})
</script>
<style lang="less" scoped>
.van-card {
  background-color: #fff;
  border-radius: 8px;
}

.img {
  width: 100%;
}

/deep/.van-card__price {
  color: #f00;
}

/deep/.van-card__header {
  margin-bottom: 5px;
}

/deep/.van-button {
  width: 100px;
  vertical-align: middle;
  border-radius: 20px;
}

/deep/.van-button--danger {
  border-color: #ee0a24;
}

/deep/ .van-ellipsis {
  white-space: inherit;
  max-height: none;
}
</style>
